/* 可移动信息框
* @ 劳兆城
* @ 2017-08-30*/

<template>
	<transition name="animate-box">
		<div class="interact-modal" ref="interact-modal" v-show="show">
			<div
				class="interact-modal-header"
				ref="interact-modal-header"
				@mousedown="boxDown">
				<div class="title">{{title}}</div>
				<div
					class="close"
					@click="hideModal"
					@mousedown.stop>&times;</div>
			</div>
			<div class="interact-modal-content">
				<slot></slot>
			</div>
		</div>
	</transition>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      isCancel: {
        type: Boolean,
        default: false
      },
      isInteract: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        show: false
      }
    },
    methods: {
      showModal () {
        this.show = true
      },
      hideModal () {
        this.show = false
        if (!this.isCancel) {
          return
        }
        this.$emit('cancel')
      },
      boxDown (event) {
        if (!this.isInteract) {
          return
        }
        let div = this.$refs['interact-modal']
        let divW = div.offsetWidth
        let divH = div.offsetHeight
        let parentW = div.offsetParent.offsetWidth
        let parentH = div.offsetParent.offsetHeight
        let startX = event.clientX - div.offsetLeft
        let startY = event.clientY - div.offsetTop
        document.onmousemove = (event) => {
          let X = event.clientX - startX
          let Y = event.clientY - startY
          if (X < 0) {
            X = 0
          }

          if (X + divW > parentW) {
            X = parentW - divW
          }

          if (Y < 0) {
            Y = 0
          }

          if (Y + divH > parentH) {
            Y = parentH - divH
          }
          div.style.margin = 0
          div.style.left = `${X}px`
          div.style.top = `${Y}px`
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
        }
      }
    }
  }
</script>

<style scoped lang="scss">

	@import '~common/scss/color';

	.interact-modal {
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 100;
		background-color: white;
		border-radius: 5px 5px 0 0;
		box-shadow: 1px 1px 1px 1px lightgray;
		overflow: hidden;
		user-select: none;
		.interact-modal-header {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: $color-default;
			color: white;
			font-size: 14px;
			border-radius: 5px 5px 0 0;
			position: relative;
			.title {
				cursor: default;
			}
			.close {
				position: absolute;
				font-size: 21px;
				right: 16px;
				top: -1px;
				cursor: pointer;
			}
			.close:hover {
				color: #999;
			}
		}
		.interact-modal-content {
			width: 100%;
			height: calc(100% - 40px);
			position: relative;
			border: 1px solid #dddee1;
			border-top: none;
		}
	}
</style>
